<template>
	<div class="fenxiaoshangguanli">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <div class="t_back" @click="goback"><i class="el-icon-arrow-left"></i>返回</div>
        <top></top>
      </div>
        
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
          <div><img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px;"></div>
          <div>客服系统管理</div>
        </div>
        <div style="height: 80px; background: rgb(255, 255, 255); border-radius: 20px; padding:0 30px;margin-bottom: 30px;">
            <div class="flex" style="align-items: center;height: 100%;">
                <div style="color:#ACACAC;font-size:14px">启用客服系统
                  <el-switch
                    @change="changekfopen"
                    style="margin-left:15px;margin-right: 15px;zoom:1.5;"
                    :active-value="1" :inactive-value="0"
                    v-model="switchvalue"
                    active-color="#13ce66"
                    inactive-color="#F6F8FB">
                  </el-switch>
                  启用后分销商商户可以在界面点击联系客服跟您沟通</div>
            </div>
        </div>
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
          <div><img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px;"></div>
          <div>客服列表</div>
        </div>
        <el-button type="primary" @click="opencreate(1,'')" style="background-color: #0048FF;" round>创建客服</el-button>
        <div style="margin-top: 20px;">
          <el-table :data="list" style="width: 100%">
            <el-table-column align="center" prop="nickname" label="客服昵称">
              <template slot-scope="scope">
                {{ scope.row.nickname }} 
                <i @click="opencreate(2,scope.row)" class="el-icon-edit" style="color: #005AFF;" ></i>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="phone" label="联系电话"></el-table-column>
            <el-table-column align="center"  label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="tochat(scope.row)" style="color: #0048FF;">进入工作台</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :page-size="search.pageSzie"
            @current-change = 'pagechange' :total="total"></el-pagination>
			<!-- <footers></footers> -->
      </div>
    </div>
    <!-- 添加客服 -->
    <el-dialog
      :title="nowtype==1?'添加客服':'修改客服'"
      :visible.sync="isshowaddkf"
      width="500px"
      :close-on-click-modal="false">
      <!-- 选择分组  group_id -->
      <!-- 客服头像  avatar -->
      <!-- 客服名称  nickname -->
      <!-- 手机号码  phone -->
      <!-- 登录账号  account -->
      <!-- 登录密码  password -->
      <!-- 确认密码  true_password -->
      <!-- 欢迎语  welcome_words -->
      <!-- 自动回复  auto_reply -->
      <!-- 客服状态  status -->
      <div class="t_add_item">
        <div class="t_add_title">客服头像</div>
        <div><chuantu v-if="isshowaddkf" :widths="'100px'" :heights="'100px'" :widths2="'100px'" :heights2="'100px'"  @getimg="getimg2"  :imgs="img" ></chuantu></div>
      </div>
      <div class="t_add_item">
        <div class="t_add_title">客服名称</div>
        <el-input style="width: 300px;" v-model="kfform.nickname" placeholder="请输入客服名称"></el-input>
      </div>
      <div class="t_add_item">
        <div class="t_add_title">手机号码</div>
        <el-input style="width: 300px;" v-model="kfform.phone" placeholder="请输入手机号码"></el-input>
      </div>
      <div class="t_add_item" v-if="nowtype==1">
        <div class="t_add_title">登录账号</div>
        <el-input style="width: 300px;" v-model="kfform.account" placeholder="请输入登录账号"></el-input>
      </div>
      <div class="t_add_item" >
        <div class="t_add_title">登录密码</div>
        <el-input style="width: 300px;" v-model="kfform.password" placeholder="请输入登录密码"></el-input>
      </div>
      <div class="t_add_item" >
        <div class="t_add_title">确认密码</div>
        <el-input style="width: 300px;" v-model="kfform.true_password" placeholder="请再次输入密码"></el-input>
      </div>
      <div style="text-align: center;">
        <el-button round @click="isshowaddkf = false">取 消</el-button>
        <el-button round type="primary" @click="upadd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改昵称 -->
    <!-- <el-dialog
      title="修改昵称"
      :visible.sync="isshowchangenickname"
      width="500px"
      :close-on-click-modal="false">
      <div class="t_add_item">
        <div class="t_add_title">客服名称</div>
        <el-input style="width: 300px;" v-model="changename" placeholder="请输入客服名称"></el-input>
      </div>
      <div style="text-align: center;">
        <el-button round @click="isshowchangenickname = false">取 消</el-button>
        <el-button round type="primary" @click="changeedit">确 定</el-button>
      </div>
    </el-dialog> -->
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import chuantu from '@/components/chuantu.vue'
  import Cookies from 'js-cookie'
	export default {
		name: 'kfset',
    components:{
      left,top,chuantu,footers
    },
		data() {
			return {
        search:{
          page:1,
          pageSzie:20,
        },
        total:0,
        list:[],
        switchvalue:0,
        isshowaddkf:false,
        kfform:{
          // group_id:'',
          avatar:'',
          nickname:'',
          phone:'',
          account:'',
          password:'',
          true_password:'',
          appid:''
          // welcome_words:'',
          // auto_reply:'',
          // status:''
        },
        isshowchangenickname:false,
        changename:'',
        changerow:'',
        customer_service_appid:'',
        nowtype:'',
        img:'',
        nowchooserow:{}
			}
		},
		created() {
      //获取客服配置
      this.getkfpeizhi()
      //列表
      this.getlist()
      
		},
		mounted() {

		},
		methods: {
      //获取客服配置
      getkfpeizhi(){
        axios.get('/own/customer/service/info').then((response)=>{
        	if (response.data.msg.code == 0) {
            console.log('获取客服配置')
            console.log(response.data.data)
            this.switchvalue = response.data.data.customer_service_open
            this.customer_service_appid = response.data.data.customer_service_appid
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //列表
      getlist(){
        axios.get('/own/customer/service/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            console.log('列表')
            console.log(response.data.data)
            this.list = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //分页
      pagechange(val){
        console.log(val)
        this.search.page = val
        //列表
        this.getlist()
      },
      //返回
      goback(){
        window.history.back();
      },
      //跳转到聊天
      tochat(row){
        
        axios.post('/own/customer/service/staging/login',{
          id:row.id
        }).then((res)=>{
          console.log(res.data.data)
        	var url = 'http://xiaoluohao.vip/kefu?acc='+res.data.data.account+'&pwd='+res.data.data.password;
          console.log(url)
          window.open(url, '_blank');
        })


      //   kefuLogin(item.id).then(res => {
      
      // }).catch(error => {
      //   this.$Message.error(error.msg)
      // })
        
      },
      getExpiresTime(expiresTime) {
        let nowTimeNum = Math.round(new Date() / 1000);
        let expiresTimeNum = expiresTime - nowTimeNum;
        return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
      },
      //添加客服
      upadd(){
        if(this.nowtype==1){
          //新增
          if(this.kfform.avatar == ''){
            this.$message.error('请选择头像');
            return
          }
          if(this.kfform.nickname == ''){
            this.$message.error('请输入客服名称');
            return
          }
          if(this.kfform.phone == ''){
            this.$message.error('请输入手机号码');
            return
          }
          if(this.kfform.account == ''){
            this.$message.error('请输入登录账号');
            return
          }
          if(this.kfform.password == ''){
            this.$message.error('请输入登录密码');
            return
          }
          if(this.kfform.true_password == ''){
            this.$message.error('请输入确认密码');
            return
          }
          this.kfform.appid = this.customer_service_appid
          console.log(this.kfform)
          axios.post('/own/customer/service/add',this.kfform).then((response)=>{
            if (response.data.msg.code == 0) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.isshowaddkf = false
              //列表
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        }else if(this.nowtype==2){
          //修改
             axios.post('/own/customer/service/update',{
              id:this.nowchooserow.id ,
              yun_cust_id:this.nowchooserow.yun_cust_id,
              avatar:this.kfform.avatar,
              nickname:this.kfform.nickname,
              phone:this.kfform.phone,
              password:this.kfform.password,
              true_password:this.kfform.true_password,
            }).then((response)=>{
              if (response.data.msg.code == 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                this.isshowaddkf = false
                //列表
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }

        
        
      },
      //打开创建客服
      opencreate(type,row){
        if(this.customer_service_appid==''){
          this.$message.error('请先启用客服系统');
          return
        }
        this.nowtype = type
        this.nowchooserow = row
        this.isshowaddkf = true
        if(type==1){
          //新增
          this.kfform.avatar = ''
          this.kfform.nickname = ''
          this.kfform.phone = ''
          this.kfform.account = ''
          this.kfform.password = ''
          this.kfform.true_password = ''
        }else if(type==2){
          //修改
          this.img = row.avatar
          this.kfform.avatar = row.avatar
          this.kfform.nickname = row.nickname
          this.kfform.phone = row.phone
          this.kfform.account = row.account
          this.kfform.password = ''
          this.kfform.true_password = ''
        }
        
       
      },
      //组件返回图片地址
      getimg2:function(item){
        console.log(item)
        this.kfform.avatar = item
      },
      //打开修改昵称
      // changenickname(row){
      //   this.isshowchangenickname = true
      //   this.changename = row.nickname
      //   this.changerow = row
      // },
      //提交修改昵称
      // changeedit(){
      //   axios.post('/own/customer/service/update',{
      //     id:this.changerow.id ,
      //     yun_cust_id:this.changerow.yun_cust_id,
      //     nickname:this.changename,
      //   }).then((response)=>{
      //   	if (response.data.msg.code == 0) {
      //       this.$message({
      //         message: '操作成功',
      //         type: 'success'
      //       });
      //       this.isshowchangenickname = false
      //       //列表
      //       this.getlist()
      //   	} else {
      //   		this.$message.error(response.data.msg.info);
      //   	}
      //   })
        
      // },
      //切换是否开启
      changekfopen(val){
        console.log(val)
        axios.post('/own/customer/service/switch',{
          open:val
        }).then((response)=>{
        	if (response.data.msg.code == 0) {
            console.log('切换是否开启')
            console.log(response.data.data)
            //获取客服配置
            this.getkfpeizhi()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //设置cookies
      setCookies(key, val, cookieExpires){
          Cookies.set(key, val, {expires: cookieExpires || 1})
      }
		}
	}
</script>


<style scoped >
.t_back{
  background-color: white;
  cursor: pointer;
  width: 85px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  color: #787D85;
}
.t_add_item{
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.t_add_title{
  font-size: 14px;
  width: 100px;
  text-align: right;
  padding-right: 20px;
}
</style>
